<template>
	<view class="page-total" v-if="isShow">
		<view class="box" :class="AClass[AnIndex][AnIdx]">
			<view class="dialog-box">
				<view class="title">{{options.title}}</view>
				<view class="content" v-if="options.DialogType == 'input'">
					<input type="text" v-model="options.value" :placeholder="options.placeholder">
					<text class="iconfont icon-clear" @click.stop="onClear"></text>
				</view>
				<view class="inquiry" v-else-if="options.DialogType == 'inquiry'">
					<text>{{options.content}}</text>
				</view>
				<view class="operation-btn">
					<view class="btn" @click="onCancel">
						<text>取消</text>
						<text class="tag"></text>
					</view>
					<view class="btn" @click="onConfirm">
						<text class="activity">确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				AClass:[
					['a-fadein', 'a-fadeout'],
					['a-bouncein', 'a-bounceout'],
				],
				AnIndex: 0,
				AnIdx: 0,
				isShow: false,
				SetTime: null,
				value: '',
				// parmoise
				resolve: '',
				reject: '',
				promise: '',
				// 配置
				options:{
					// 提示标题
					title: '提示',
					// 内容
					content: '',
					// 提示内容
					placeholder: '请输入内容',
					// 提示框类型
					DialogType: 'input',
					// 动画类型
					animation: 0,
				},
			};
		},
		props:{
			// 提示标题
			title: {
				type: String,
				default: '提示',
			},
			// 内容
			content: {
				type: String,
				default: '',
			},
			// 提示内容
			placeholder: {
				type: String,
				default: '请输入内容',
			},
			// 提示框类型
			DialogType: {
				type: String,
				default: 'input'
			},
			// 动画类型
			animation: {
				type: Number,
				default: 0
			}
		},
		methods:{
			// 询问框
			confirm(options) {
				this.AnIndex = options.animation||0;
				this.AnIdx = options.animation||0;
				this.options = {
					// 提示标题
					title: options.title||'提示',
					// 内容
					content: options.content||'',
					// 提示内容
					placeholder: options.placeholder||'请输入内容',
					// 提示框类型
					DialogType: options.DialogType||'input',
					// 动画类型
					animation: options.animation||0,
					// input输入的值
					value: options.value||'',
				};
				this.show();
				this.promise = new Promise((resolve, reject) => {
						this.resolve = resolve;
						this.reject = reject;
				});
				return this.promise; //返回promise对象,给父级组件调用
			},
			/**
			 * 显示
			 */
			show(callback){
				this.isShow = true;
			},
			/**
			 * 隐藏
			 */
			hide(){
				this.AnIdx = 1;
				this.SetTime = setTimeout(() => {
					this.isShow = false;
				}, 300);
			},
			/**
			 * 清除输入值
			 */
			onClear(){
				this.options.value = '';
			},
			/**
			 * 取消点击
			 */
			onCancel(){
				this.hide();
				this.reject({
					value: this.options.value,
					isConfirm: true,
				});
			},
			/**
			 * 确定点击
			 */
			onConfirm(){
				this.hide();
				this.resolve({
					value: this.options.value,
					isConfirm: true,
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	.page-total{
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
	}
	
	.box{
		display: flex;
		justify-content: center;
		width: 100%;
	}
	/* 文件重命名 */
	.dialog-box{
		width: 80%;
		height: 300rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		.title{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-size: 32rpx;
			color: #222222;
			font-weight: bold;
		}
		.content{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
			background-color: #f6f6f6;
			border-radius: 10rpx;
			input{
				width: 80%;
				height: 100%;
				font-size: 28rpx;
				color: #222222;
				padding: 0 4%;
			}
			text{
				font-size: 34rpx;
				color: #c0c0c0;
				margin-right: 4%;
			}
		}
		.inquiry{
			padding: 0 4%;
			height: 80rpx;
			text-align: center;
			text{
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
			}
		}
		.operation-btn{
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			margin-top: 20rpx;
			border-top: 2rpx solid #f6f6f6;
			.btn{
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 100%;
				text{
					font-size: 28rpx;
					color: #222222;
				}
				.tag{
					position: absolute;
					right: 0;
					top: 30%;
					width: 2rpx;
					height: 40%;
					background-color: #f6f6f6;
				}
				.activity{
					color:#333333;
				}
			}
		}
	}
	
	
	.a-fadein,
	.a-fadeinT,
	.a-fadeinR,
	.a-fadeinB,
	.a-fadeinL,
	.a-bouncein,
	.a-bounceinT,
	.a-bounceinR,
	.a-bounceinB,
	.a-bounceinL,
	.a-rotatein,
	.a-rotateinLT,
	.a-rotateinLB,
	.a-rotateinRT,
	.a-rotateinRB,
	.a-flipin,
	.a-flipinX,
	.a-flipinY {
		-webkit-animation: .3s ease-out backwards;
		-moz-animation: .3s ease-out backwards;
		-ms-animation: .3s ease-out backwards;
		-moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	
	.a-fadeout,
	.a-fadeoutT,
	.a-fadeoutR,
	.a-fadeoutB,
	.a-fadeoutL,
	.a-bounceout,
	.a-bounceoutT,
	.a-bounceoutR,
	.a-bounceoutB,
	.a-bounceoutL,
	.a-rotateout,
	.a-rotateoutLT,
	.a-rotateoutLB,
	.a-rotateoutRT,
	.a-rotateoutRB,
	.a-flipoutX,
	.a-flipoutY {
		-webkit-animation: .3s ease-in forwards;
		-moz-animation: .3s ease-in forwards;
		-ms-animation: .3s ease-in forwards;
		animation: .3s ease-in forwards;
		-moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	
	
	/* 淡入 */
	.a-fadein {
		-webkit-animation-name: fadein;
		-moz-animation-name: fadein;
		-ms-animation-name: fadein;
		animation-name: fadein;
	}
	
	/* 淡出 */
	.a-fadeout {
		-webkit-animation-name: fadeout;
		-moz-animation-name: fadeout;
		-ms-animation-name: fadeout;
		animation-name: fadeout;
	}
	
	/* 弹入 */
	.a-bouncein {
		-webkit-animation-name: bouncein;
		-moz-animation-name: bouncein;
		-ms-animation-name: bouncein;
		animation-name: bouncein;
	}
	
	/* 弹出 */
	.a-bounceout {
		-webkit-animation-name: bounceout;
		-moz-animation-name: bounceout;
		-ms-animation-name: bounceout;
		animation-name: bounceout;
	}
	
	
	/* 淡入 */
	@keyframes fadein {
		0% {
			opacity: 0;
		}
	
		100% {
			opacity: 1;
		}
	}
	
	/* 淡出 */
	@keyframes fadeout {
		0% {
			opacity: 1;
		}
	
		100% {
			opacity: 0;
		}
	}
	
	/* 弹入 */
	@keyframes bouncein {
		0% {
			opacity: 0;
			transform: scale(0.3);
		}
	
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	/* 弹出 */
	@keyframes bounceout {
		0% {
			opacity: 1;
			transform: scale(1);
		}
	
		100% {
			opacity: 0;
			transform: scale(0.3);
		}
	}
</style>
